<template>
	<div id="register">
		<h2 class="text-primary"> 注册</h2>
		<form method="post" id="register.in" @submit.prevent="submit_register">
			<table class="table">
				<tr height="50px">
					<td><label for="username_r">用户名:</label></td>
					<td><input type="text" id="username_r" name="username" @blur="username_r" v-model="username.username" class="form-control" /></td>
					<span v-cloak :style="span_style.username">{{info.username}}</span>
				</tr>
				<tr>
					<td><label for="password_r">输入密码:</label></td>
					<td><input type="password" name="password" id="password_r" @keyup="password_s" v-model="password1" class="form-control" /></td>
					<span v-cloak :style="span_style.password">{{info.password1}}</span>
				</tr>
				<tr>
					<td><label>密码强度：</label></td>
					<div id="strengthLevel" :class="strengthLevel"></div>
				</tr>
				<tr>
					<td><label for="password_r2">再次输入:</label></td>
					<td><input type="password" name="password" id="password_r2 " @blur="p_equal" v-model="password2" class="form-control" /></td>
					<span v-cloak :style="span_style.password2">{{info.password2}}</span>
				</tr>
				<tr>
					<td><label for="name">昵称:</label></td>
					<td><input type="text" name="name" id="name" v-model="r.name" @blur="name_r" class="form-control" /></td>
				</tr>
				<tr>
					<td><label for="question">安全问题:</label></td>
					<td><input type="date" name="answer" id="question" placeholder="你的生日是？" v-model="r.answer" @blur="answer_r" class="form-control" /></td>
					<span v-cloak :style="span_style.answer">{{info.answer}}</span>
				</tr>
				<tr>
					<td><label for="mail">邮箱:</label></td>
					<td><input type="text" id="mail" name="mail" v-model="r.mail" @blur="mail_r" class="form-control" /></td>
				</tr>

				<input type="submit" value="确定" class="btn btn-primary" />

			</table>

		</form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// 存放着注册信息
				r: {

				},
				//临时存放用户名
				username: {
					username: ''
				},
				// 临时存放两次输入的密码
				password1: '',
				password2: '',
				// 注册提示info
				info: {
					username: '用户名不能小于6位',
					password1: '密码不能小于6位',
					password2: '',
					answer: '出生年月'
				},
				// info提示的样式
				span_style: {
					username: 'color:#2c3e50',
					password: 'color:#2c3e50',
					answer: 'color:#2c3e50',
					password2: 'color:red'
				},
				// 密码强度的class
				strengthLevel: 'strengthLevel0',
				// button
				button_style: '',
				// 判断每个input是否填写完毕
				sure: {
					input1: false,
					input2: false,
					input3: false,
					input4: true,
					input5: false,
					input6: true
				},
				blur: '',

			}
		},
		methods: {
			// 用户名
			username_r() {
				if(this.username.username.length >= 6) {
					this.$http.post('/api/username', this.username, {
						emulateJSON: true
					}).then(data => {

						if(data.body.length != 0) {
							this.info.username = "用户名已存在";
							this.span_style.username = 'color:red';
							this.sure.input1 = false;
						} else {
							this.info.username = '✔';
							this.span_style.username = 'color:green';
							this.r.username = this.username.username;
							this.sure.input1 = true;
						}
					})
				} else {
					this.info.username = '用户名不能小于6位';
					this.span_style.username = 'color:red';
					this.sure.input1 = false;
				}

			},
			// 密码
			password_s() {
				if(this.password1.length >= 6) {
					this.p_strong();
					this.info.password1 = '✔';
					this.span_style.password = 'color:green';
					this.sure.input2 = true;

				} else {
					this.info.password1 = "密码不能小于6位";
					this.span_style.password = 'color:red';
					this.strengthLevel = 'strengthLevel0';
					this.sure.input2 = false;
				}
			},
			// 判断两次输入密码相等
			p_equal() {
				if(this.password1 === '' & this.password2 === '')
					this.info.password2 = '';
				else if(this.password1 !== this.password2) {
					this.info.password2 = '两次密码不一致';
					this.span_style.password2 = 'color:red';
					this.sure.input3 = false;

				} else {
					this.info.password2 = '✔';
					this.r.password = this.password2;
					this.span_style.password2 = 'color:green';
					this.sure.input3 = true;

				}
			},
			// 判断密码强度
			p_strong() {
				if(/[0-9]/.test(this.password1)) {
					this.strengthLevel = 'strengthLevel1';
				}
				if(/[a-zA-Z]/.test(this.password1)) {
					this.strengthLevel = 'strengthLevel2';
				}
				if(/[^0-9a-zA-Z_]/.test(this.password1)) {
					this.strengthLevel = 'strengthLevel3';
				}
			},
			name_r() {
				this.sure.input4 = true;

			},
			// 问题答案
			answer_r() {
				if(this.r.answer !== '')
					this.sure.input5 = true;
				else
					this.sure.input5 = false;

			},
			mail_r() {
				this.sure.input6 = true;

			},
			submit_register() {
				if(this.sure.input1 & this.sure.input2 & this.sure.input3 & this.sure.input4 & this.sure.input5 & this.sure.input6) {
					this.$http.post('/api/register', this.r, {}).then(data => {
						if(data.status == 200) {

							alert("注册成功");

							this.$router.replace({
								path: '/login'
							});
						}
						//						this.info.username = "该用户已存在";
						//						this.sure.input1 = false;
						//						this.span_style.username = "color:red";

					}, (error) => {
						alert("注册失败");
					})

				} else {
					alert("请正确填写相应内容");
				}

			}

		}
	}
</script>
<style scoped lang="less">
	#register {
		width: 500px;
		margin: 0 auto;
		span {
			display: inline-block;
			margin-top: 20px;
			width: 150px
		}
		label {
			width: 100px;
		}
		#strengthLevel {
			margin-top: 15px;
			margin-left: 20px;
		}
		.strengthLevel0 {
			height: 20px;
			padding: 2px;
			border: #ccc solid 1px;
			width: 180px;
		}
		.strengthLevel1 {
			height: 20px;
			padding: 2px;
			border: #ccc solid 1px;
			width: 60px;
			background-color: red;
		}
		.strengthLevel2 {
			height: 20px;
			padding: 2px;
			border: #ccc solid 1px;
			width: 120px;
			background-color: orange;
		}
		.strengthLevel3 {
			height: 20px;
			padding: 2px;
			border: #ccc solid 1px;
			width: 180px;
			background-color: green;
		}
	}
	
	.form-control {
		padding: 0px
	}
</style>